@charset "utf-8";


.lunbo{
    width: 100%;
    height: 548px;
    position: relative;
    
    >img{
        width: 100%;
        height: 540px;
    }
    .btn{
        left: 50%;
        bottom: 15px;
        position: absolute;
        width: 120px;
        
        >ul{
            >li{
                float: left;
                width: 15px;
                height: 15px;
                border-radius: 50%;
                background: #a2d2e9;
                margin-right: 20px;
                cursor: pointer;
                opacity: 0.9;
                &:hover{
                    background: #2395cb;
                }
            }
            >li:last-child{
                margin-right: 0;
            }
        }
    }
    .bottom{
        width: 100%;
        height: 8px;
        background: -webkit-gradient(#dbe9f0,white);
        background: -webkit-linear-gradient(#dbe9f0, white);
        background: -moz-linear-gradient(#dbe9f0, white);
        background: -o-linear-gradient(#dbe9f0, white);
    }
}
@keyframes shanliang{
    50%{
        filter:brightness(30%);
    }
    100%{
        filter:brightness(100%);
    }
}
@keyframes gundong{
    50%{
        left: 0;
    }
    75%{
        left: 200px;
    }
    100%{
        left: 105px;
    }
    
}
.products_head{
    text-align: center;
    width: 315px;
    height: 170px;
    position: relative;
}
.productsFather{
    background: #f6f6f6;
    width: 100%;
    height: 550px;
    >.products{
        width: 975px;
        height: 550px;
        margin: 0 auto;
        background: #f5f5f5;
        
        >.products_left{
            width: 315px;
            height: 478px;
            float: left;
            margin-right: 15px;
            margin-top: 72px;
            background: white;
            box-shadow: 5px 5px 5px #e3e3e3;
            transition: all 0.3s;
            >.head{
                @extend .products_head;
                background:#2395cb;
                position: relative;
                >img{
                    transition: all 0.5s;
                    margin-top: 15px;  
                    
                    &:hover{
                      transform: rotate(360deg);   
                      
                    }
                             
                }
                >p{
                    color: white;
                    font-size: 15px;
                    line-height: 35px;
                    
                }
                >p:nth-child(3){
                    position: absolute;
                    left: 105px;
                    animation: gundong 5s linear infinite;
                }
                >.triangle{
                    position: absolute;
                    width: 0px;
                    height: 0px;            
                    bottom: -17px;
                    left: 50%;
                    border-left:0px ;
                    border-bottom: 35px solid #2395cb;
                    border-right: 35px transparent solid;
                    border-top: 0px  solid;
                    margin-left: -18px;
                    transform: rotateZ(-45deg);
                }
            }
            >.content{
                width: 283px;
                height: 130px;
                margin: 0 auto;
                margin-top: 30px;
                >img{
                    width: 110px;
                    height: 100px;
                    float: left;
                    margin-top: 9px;
                }
                >div{
                    height: 84px;
                    width: 125px;
                    float: left;
                    margin-left: 28px;
                    font-size: 14px;
                    padding: 8px 0;
                    margin-top: 9px;
                    >a{
                        color: black;
                    }
                }
            }
            >.list{
                margin-top: 45px;
                height: 103px;
                width: 315px;
                
                >ul{
                    margin-left: 28px;
                    >li{
                       list-style: square;                   
                        color: #2395cb;
                        transition: all 0.3s;
                        &:hover{
                                transform: skewx(7deg);
                            }
                        >a{
                            font-size: 14px;
                            color: black;
                            
                            
                        }
                    }
                }
            }
        }
        >.products_middle{
            width: 315px;
            height: 478px;
            float: left;
            margin-right: 15px;
            margin-top: 72px;
            background: white;
            box-shadow: 5px 5px 5px #e3e3e3;
            transition: all 0.3s;
            >.head{
                @extend .products_head;
                background:#3ed1a4;
                >img{
                    transition: all 0.5s;
                    margin-top: 15px;  
                    
                    &:hover{
                      transform: rotate(360deg);   
                      
                    }
                }
                >p{
                    color: white;
                    font-size: 15px;
                    line-height: 35px;
                }
                >p:nth-child(3){
                    position: absolute;
                    left: 105px;
                    animation: gundong 5s linear infinite;
                }
                >.triangle{
                    position: absolute;
                    width: 0px;
                    height: 0px;            
                    bottom: -17px;
                    left: 50%;
                    border-left:0px ;
                    border-bottom: 35px solid #3ed1a4;
                    border-right: 35px transparent solid;
                    border-top: 0px  solid;
                    margin-left: -18px;
                    transform: rotateZ(-45deg);
                }
            }
            >.content{
                height: 250px;
                width: 315px;
                margin-top: 60px;
                
                >.lunbo{
                    height: 145px;
                    width: 315px;
                    text-align: center;
                    position: relative;
                    >a>img{
                        height: 140px;
                        width: 219px;
                        animation: shanliang 2s linear infinite;
                        &:hover{
                            
                            animation-play-state: paused;
                            
                        }
                    }
                    >i:nth-child(2){
                        position: absolute;
                        top: 45px;
                        font-size: 40px;
                        color: #e1e1e1;
                        right: 12px;
                        cursor: pointer;
                    }
                    >i:nth-child(3){
                        position: absolute;
                        top: 45px;
                        font-size: 40px;
                        color: #e1e1e1;
                        left: 10px;
                        cursor: pointer;
                        transform: scaleX(-1);
                    }
                }
                >.introduce{
                    width: 315px;
                    height: 105px;
                    text-align: center;
                    line-height:30px ;
                    >p:first-child{
                        color: #2395cb;
                        font-size: 18px;
                        transition: all 0.3s;
                        &:hover{
                                transform: skewx(7deg);
                            }
                    }
                    >p:last-child{
                        font-size: 12px;
                        transition: all 0.3s;
                        &:hover{
                                transform: skewx(7deg);
                            }
                    }
                }
            }
        }
        >.products_right{
            width: 315px;
            height: 478px;
            float: left;       
            margin-top: 72px;
            background: white;
            box-shadow: 5px 5px 5px #e3e3e3;
            transition: all 0.3s;
            >.head{
                @extend .products_head;
                background:#895ea3;
                >img{
                    transition: all 0.5s;
                    margin-top: 15px;  
                    
                    &:hover{
                      transform: rotate(360deg);   
                    }
                }
                >p{
                    color: white;
                    font-size: 15px;
                    line-height: 35px;
                }
                >p:nth-child(3){
                    position: absolute;
                    left: 105px;
                    animation: gundong 5s linear infinite;
                }
                >.triangle{
                    position: absolute;
                    width: 0px;
                    height: 0px;            
                    bottom: -17px;
                    left: 50%;
                    border-left:0px;
                    border-bottom: 35px solid #895ea3;
                    border-right: 35px transparent solid;
                    border-top: 0px  solid;
                    margin-left: -18px;
                    transform: rotateZ(-45deg);
                }
            }
            >.content{
                width: 290px;
                height: 265px;
                margin: 0 auto;
                margin-top: 45px;
                >a>img{
                    width: 100%;
                    height: 125px;
                    filter:brightness(30%);
                    transition: all 1s ;
                    &:hover{
                        filter:brightness(100%);
                        transform: scale(1.2);
                    }
                }
                >.introduce{
                    width: 205px;
                    height: 80px;
                    margin: 0 auto;
                    margin-top: 55px;
                    >a{
                        font-size:12px;
                        color: black;
                        transition: all 0.3s;
                        
                    }
                }
            }
        }
    }
}   
    
.AboutUs{
    width: 100%;
    height: 495px;
    background: url(../img/bg2.png) bottom repeat-x  #f6f6f6;
    overflow: hidden;
    >.head{
        width: 258px;
        height: 38px;
        border-bottom: 2px solid #c9c9c9;
        margin: 0 auto;
        text-align: center;
        position: relative;
        margin-top: 58px;
        >p{
            font-size: 18px;
            font-weight: bold;
        }
        >span{
            position: absolute;
            left: 50%;
            margin-left: -50px;
            display: block;
            font-size: 12px;
            color: #999999;
            bottom: -8px;
            background: #f6f6f6;
            width: 100px;
        }
    }
    >.content{
        width: 935px;
        height: 68px;
        margin: 0 auto;
        text-align: center;
        text-indent: 20px;
        margin-top: 100px;
        font-size: 14px;
        color: #272727;
    }
    >.lunbo{
        height: 161px;
        width: 1050px;
        margin: 0 auto;
        overflow: hidden;
        padding: 2px 0px;
        >img{
            width: 280px;
            height: 160px;
            margin-right: 20px;
            filter:brightness(30%);
            transition: all 1s ;
            &:hover{
                filter:brightness(100%);
            }
        }
        >div:first-child{
            width: 50px;
            height: 160px;
            display: inline-block;
            overflow: hidden;
            margin-right: 20px;
            >img{
                filter:brightness(30%);
                transition: all 1s ;
                &:hover{
                    filter:brightness(100%);
                }
            }
        }
        >div:last-child{
            width: 61px;
            height: 160px;
            display: inline-block;
            overflow: hidden;
            >img{
                filter:brightness(30%);
                transition: all 1s ;
                &:hover{
                    filter:brightness(100%);
                }
            }
        }
    }
}

.ContactUs{
    width: 100%;
    height: 585px;
    background: white;
    margin-bottom: 58px;
    .header{
        height: 105px;
        width: 100%;
        background: #F6F6F6;//F6F6F6
        overflow: hidden;
        
        .head{
            width: 258px;
            height: 38px;
            border-bottom: 2px solid #c9c9c9;
            margin: 0 auto;
            text-align: center;
            position: relative;
            margin-top: 33px;
            >p{
                font-size: 18px;
                font-weight: bold;
            }
            >span{
                position: absolute;
                left: 50%;
                margin-left: -50px;
                display: block;
                font-size: 12px;
                color: #999999;
                bottom: -8px;
                background: #f6f6f6;
                width: 100px;
            }
        }
    }
    .content{
        width: 1075px;
        margin: 0 auto;
        height:480px ;
        overflow: hidden;
        >.information{
    

            width: 435px;
            height: 427px;
            margin-top: 53px;
            float: left;
            >.lianxi{
                width: 435px;
                height: 190px;
                >.wechat{
                    width: 141px;
                    height: 174px;
                    float: left;
                    border: 1px solid #ebebeb;
                    text-align: center;
                    padding: 7px 0;
                    >img{
                        width: 125px;
                        height: 125px;
                        margin-bottom: 10px;
                    }
                    >p{
                        font-size: 12px;
                        color: black;
                    }
                }
                >.message{
                    width: 268px;
                    height: 190px;
                    float: left;
                    margin-left: 24px;
                    >p{
                        color: #666666;
                        font-size: 14px;
                        line-height: 30px;
                        >i{
                            color: #3c9cd3;
                            display: inline-block;  
                            margin-right: 15px;
                            
                        }
                        >.iconfont{
                            font-size: 20px;
                        }
                    }
                }
            }
            >.map{
                width: 435px;
                height: 200px;
                margin-top: 37px;
            }
        }
        >.form{
            width: 605px;
            height: 427px;
            margin-top: 53px;
            float: left;
            margin-left: 35px;
            >.inputcommon{
                width: 605px;
                height: 62px;
                margin-left: 2px;
                margin-bottom: 18px;
                >p{
                    color: #666666;
                    font-size: 14px;
                    
                }
                >input[type="text"]{
                    height: 35px;
                    width: 600px;
                    border: 1px dashed #d4d2d2;
                    background: #f9f8f8;
                    margin-top: 8px;
                }
            }
            >.inputother{
                width: 605px;
                height: 143px;
                margin-left: 2px;
                margin-bottom: 19px;
                >p{
                    color: #666666;
                    font-size: 14px;
                    
                }
                >textarea{
                    height: 120px;
                    width: 600px;
                    border: 1px dashed #d4d2d2;
                    background: #f9f8f8;
                    resize: none;
                    margin-top: 8px;
                }
                
            }
            >button{
                    width: 95px;
                    height: 30px;
                    background: #3c9cd3;
                    text-align: center;
                    line-height: 30px;
                    font-size: 12px;
                    color: white;
            }
        }
    }
}

